import React, { Component } from 'react';
import {
  StyleSheet, View, Text, TextInput, TouchableOpacity,
} from 'react-native';
import { Icon } from 'native-base';

class SearchBarHeader extends Component {
  inputValue = '';

  _onChangeText = (v) => {
    this.inputValue = v;
  };

  _onSearch = (search) => {
    search(this.inputValue);
  };

  render() {
    const { placeholder, search } = this.props;
    return (
      <View style={styles.root_container}>
        <View style={styles.circle_container}>
          <Icon name="ios-search" style={{ fontSize: 24 }} />
          <TextInput
            onChangeText={this._onChangeText}
            style={styles.text_input}
            underlineColorAndroid="transparent"
            defaultValue=""
            placeholder={placeholder}
            onSubmitEditing={() => this._onSearch(search)}
          />
        </View>
        <TouchableOpacity
          style={{ padding: 8 }}
          onPress={() => this._onSearch(search)}
        >
          <Text style={{ color: 'white' }}>搜索</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root_container: {
    paddingTop: 8,
    paddingBottom: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  circle_container: {
    flex: 1,
    padding: 4,
    backgroundColor: '#DEE1E6',
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  text_input: {
    flex: 1,
    marginLeft: 4,
    padding: 0,
  },
});

export default SearchBarHeader;
